<template>
    <!-- 数据管理 - 食品列表 -->
    <div>
        <el-header height="auto">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/Main/index' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>
                    <a>数据管理</a>
                </el-breadcrumb-item>
                <el-breadcrumb-item>食品列表</el-breadcrumb-item>
            </el-breadcrumb>
            <el-dropdown placement="bottom">
                <span class="el-dropdown-link">
                    <img src="../../../assets/img/default.jpg" alt />
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="goToIndex">首页</el-dropdown-item>
                    <el-dropdown-item @click.native="LogOUt">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-header>
        <main class="user-content list_content">
            <section>
                <template>
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column type="expand">
                            <!-- 表格展开属性 -->
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="食品名称">
                                        <span>{{ props.row.foodName }}</span>
                                    </el-form-item>
                                    <el-form-item label="餐馆名称">
                                        <span>{{ props.row.shopName }}</span>
                                    </el-form-item>
                                    <el-form-item label="食品 ID">
                                        <span>{{ props.row.foodId }}</span>
                                    </el-form-item>
                                    <el-form-item label="餐馆 ID">
                                        <span>{{ props.row.shopId }}</span>
                                    </el-form-item>
                                    <el-form-item label="食品介绍">
                                        <span>{{ props.row.foodDesc }}</span>
                                    </el-form-item>
                                    <el-form-item label="餐馆地址">
                                        <span>{{ props.row.address }}</span>
                                    </el-form-item>
                                    <el-form-item label="食品评分">
                                        <span>{{ props.row.fraction }}</span>
                                    </el-form-item>
                                    <el-form-item label="食品分类">
                                        <span>{{ props.row.category }}</span>
                                    </el-form-item>
                                    <el-form-item label="月销量">
                                        <span>{{ props.row.volume }}</span>
                                    </el-form-item>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column label="食品名称" prop="foodName"></el-table-column>
                        <el-table-column label="食品介绍" prop="foodDesc"></el-table-column>
                        <el-table-column label="评分" prop="fraction"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                    size="mini"
                                    @click="handleEdit(scope.$index, scope.row)"
                                >编辑</el-button>
                                <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)"
                                >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </section>
            <section class="Pagination">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage1"
                    :page-size="100"
                    layout="total, prev, pager, next"
                    :total="1000"
                ></el-pagination>
            </section>
        </main>
    </div>
</template>
<script src="./template.js"></script>
<style scoped>
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>